import DirectoryItem from "../directory-item/directory-item.component";

import { DirectoryContainer } from "./directory.styles";

const categories = [
  {
    id: 1,
    title: "二手房",
    imageUrl:
      "https://pic1.ajkimg.com/display/58ajk/6ba3d21db707a73e46517f79d5177be4/800x650.jpg",
    route: "shop/二手房",
  },
  {
    id: 2,
    title: "学区房",
    imageUrl:
      "https://pic4.58cdn.com.cn/dwater/fang/big/n_v2631e7ce3054342dc9d4474fc6d2c0bcb.jpg?w=640&h=480&crop=1",
    route: "shop/学区房",
  },
  {
    id: 3,
    title: "新房",
    imageUrl:
      "https://pic4.ajkimg.com/display/58ajk/b30a4f9d26e4ca213d4c6935557da8ac/600x450x98c.jpg",
    route: "shop/新房",
  },
  {
    id: 4,
    title: "租房",
    imageUrl:
      "https://pic1.ajkimg.com/display/58ajk/d3ae2cb57a3d4646b84a417619c93ac6/640x420c.jpg?t=5",
    route: "shop/租房",
  },
  {
    id: 5,
    title: "精装修",
    imageUrl:
      "https://pic1.ajkimg.com/display/58ajk/41edad8009278a2ce2ba0c40e00ffc78/640x420c.jpg?t=5",
    route: "shop/精装修",
  },
];

const Directory = () => {
  return (
    <DirectoryContainer>
      {categories.map((category) => (
        <DirectoryItem key={category.id} category={category} />
      ))}
    </DirectoryContainer>
  );
};

export default Directory;
